<template>
    <!-- <div style="display: inline;">
        <a-card class="w-130 mt-5 ml-5" style="float: left;">
            <a-row>
                <a-col :span="12">
                  <a-statistic title="Active Users" :value="112893" style="margin-right: 50px" />
                </a-col>
                <a-col :span="12">
                  <a-statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
                </a-col>
              </a-row>
        </a-card>
        <a-card class="w-130 mt-5 ml-5" style="float: left;">
            <table class="h-70 text-left " id="table">
                <tbody>
                    <tr v-for="message in tableData" id="table">
                        <td class="w-60" id="table">{{message.firstList}}</td>
                        <td class="w-100" id="table">{{message.SecondList}}</td>
                    </tr>
                </tbody>
            </table>
        </a-card>
        <a-card class="w-100 mt-5 ml-5" style="float: left;">
            <a-timeline>
                <a-timeline-item>8.16日早9点了解antdesign</a-timeline-item>
                <a-timeline-item>8.16日10点构建使用该框架的vue项目</a-timeline-item>
                <a-timeline-item>Technical testing 2015-09-01</a-timeline-item>
                <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
            </a-timeline>
        </a-card>
    </div> -->
    <a-card style="float: left;width: 70%;height: 130px;" class="m-5">
        <h1 style="position: absolute;top: 40px;left: 90px;font-weight: bold;font-size: large;">超管</h1>
        <span style="position: absolute;top: 70px;left: 90px;">有限公司 | 董事长</span>
        <span id="time" style="position: absolute;top: 10px;right: 20px;"></span>
    </a-card>
    <img src="@/assets/loginbackground.jpg" width="450" height="200" class="mt-5" style="cursor: pointer;">
    <a-card style="width: 70%;height: 170px;position: relative;top: -130px;" class="ml-5">
        <h1 style="position: relative;left: -500px;font-size: large;font-weight: bold;">业务数量</h1>
        <a-row style="margin-top: 20px;">
            <a-col :span="6">
              <a-statistic title="用户数量" :value="94"/>
            </a-col>
            <a-col :span="6">
              <a-statistic title="组织数量" :value="19" />
            </a-col>
            <a-col :span="6">
              <a-statistic title="职位数量" :value="73" />
            </a-col>
            <a-col :span="6">
              <a-statistic title="角色数量" :value="3" />
            </a-col>
        </a-row>
    </a-card>
    <a-card style="width: 70%;height: 170px;position: relative;top: -110px;" class="ml-5">
        <h1 style="position: relative;left: -500px;font-size: large;font-weight: bold;">运筹一览</h1>
        <a-row style="margin-top: 20px;">
            <a-col :span="4">
              <a-statistic title="任务调度" :value="0"/>
            </a-col>
            <a-col :span="4">
              <a-statistic title="系统字典" :value="256" />
            </a-col>
            <a-col :span="4">
              <a-statistic title="业务字典" :value="3" />
            </a-col>
            <a-col :span="4">
              <a-statistic title="后台在线用户" :value="1" />
            </a-col>
            <a-col :span="4">
              <a-statistic title="前台在线用户" :value="0" />
            </a-col>
            <a-col :span="4">
              <a-statistic title="三方用户" :value="12474" />
            </a-col>
        </a-row>
    </a-card>
    <div id="container"></div>
</template>

<script setup lang="ts">
    import { message } from 'ant-design-vue';
    import { ref } from 'vue'

    const [messageApi, contextHolder] = message.useMessage();
    const tableData = [
        {
            firstList: '系统名称',
            SecondList: '新闻舆情监控系统'
        },
        {
            firstList: '备注',
            SecondList: 'antdesign项目demo'
        },
        {
            firstList: '客户端开发',
            SecondList: 'Vue3+Vite+antdesign'
        },
        {
            firstList: '服务端开发',
            SecondList: '暂无'
        },
        {
            firstList: '开发起始时间',
            SecondList: '2024-8-16'
        }
    ]
    function mytime() {
        var mydate = new Date();
        var year = mydate.getFullYear();
        var month = mydate.getMonth() + 1;
        var day = mydate.getDate();
        var hour = mydate.getHours();
        var minutes = mydate.getMinutes();
        if(hour < 10) {
            hour = '0' + hour;
        }
        if(minutes < 10) {
            minutes = '0' + minutes;
        }
        var seconds = mydate.getSeconds();
        if (seconds < 10) {
            seconds = '0' + seconds;
        }
        var time = year + '年' + month + '月' + day + '日 '+ hour + '时' + minutes + '分' 
            + seconds  +'秒'
        // nowTime.value = time;
        document.getElementById('time').innerHTML = time
    }
    setInterval(mytime, 1000);
</script>

<style scoped>
    #table {
        border: 1px solid black;
    }
</style>